<template>
  <div>
    <div>计数器 {{count}}</div>
    <div>消息 {{message}}</div>
    <div>在线人数 {{userCount}}</div>
    <div>本地计数器 {{localCount}}</div>
    <div>本地消息 {{localMessage}}</div>
    <div>doneTodosCount {{doneTodosCount}}</div>
    <div>newObj {{newObj}}</div>
    字典：
    <ul v-for="(v,k) in dictionary" :key="k">
      <li>{{k}}</li>
      <ul v-for="(v1,k1) in v" :key="k1">
        <li>{{k1}} : {{v1}}</li>
      </ul>
    </ul>
    <el-button @click="objectExpansionOperator">对象展开运算符</el-button>
    <el-button @click="incrementCount({count:3})">Count自增</el-button>
    <el-button @click="addDictionaryItem">添加字典条目</el-button>
    <el-button @click="dispatchAction">分发Action</el-button>
    <div></div>
    <el-button-group>
      <el-button @click="axios01">Axios01</el-button>
    </el-button-group>
    <div></div>
    <el-button-group>
      <el-button @click="plugin01">插件01</el-button>
      <el-button @click="plugin02">插件02</el-button>
    </el-button-group>
    <div></div>
    <el-button-group>
      <el-button @click="localStorage01">本地存储01</el-button>
      <el-button @click="localStorage02">本地存储02</el-button>
    </el-button-group>
  </div>

</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  import Vue from 'vue'

  export default {
    name: "Login",
    data() {
      return {
        obj: {
          a: 'a',
          b: 'b'
        },
        newObj: ''
      }
    },
    methods: {
      ...mapMutations([
        'incrementCount'
      ]),
      objectExpansionOperator() {
        this.newObj = JSON.stringify({...this.obj, c: 'c', b: 'b1'});
      },
      // incrementCount() {
      //   this.$store.commit('incrementCount', {count: 2})
      // },
      addDictionaryItem() {
        this.$store.state.dictionary = {...this.$store.state.dictionary, hobby: {'1': '跑步', '2': '有用'}}
      },
      dispatchAction() {
        this.$store.dispatch('incrementCount', {count: 5})
      },
      axios01() {
        this.$axios.post('/public/100101', {username: 'zhangsan', password: '123456'}).then(
          (response) => {
            console.log(response)
          }
        )
      },
      plugin01() {
        this.$alert(Vue.$myName + ' == ' + Vue.$getMyName());
      },
      plugin02() {
        this.$alert(this.mixinGetFullName())
      },
      localStorage01() {
        let data = {
          name: '张三',
          age: 18,
          books: ['《为什么我们离正义越来越远》', '《老子》的要义与诘难']
        };
        window.localStorage.setItem('key1', JSON.stringify(data));
        console.log(JSON.parse(window.localStorage.getItem('key1')));

        window.localStorage.setItem('key2', new Date().getTime());
        console.log(new Date(window.localStorage.getItem('key2')))
      },
      localStorage02() {
        let data = [23, '水电费', {name: 'zsdfsdf'}];
        this.$localStorageSet('key1', data);
        console.log(this.$localStorageGet('key1'))
        this.$sessionStorageSet('key1', data)
        console.log(this.$sessionStorageGet('key1'))
        this.$cookiesSet('key1', data)
        console.log(this.$cookiesGet('key1'))
      }
    },


    // computed: {
    //   count() {
    //     return this.$store.state.count;
    //   },
    //   message() {
    //     return this.$store.state.message;
    //   },
    //   userCount() {
    //     return this.$store.state.userCount;
    //   }
    // }

    // computed: mapState({
    //   count: state => state.count,
    //   message: state => state.message,
    //   userCount: state => state.userCount
    // })

    // computed: mapState([
    //   'count','message','userCount'
    // ])

    // 混合本地计算属性
    computed: {
      localCount() {
        return 100;
      },
      localMessage() {
        return 'Login';
      },
      doneTodosCount() {
        return this.$store.state.todos.filter(item => item.done).length;
      },
      ...mapState([
        'count', 'message', 'userCount', 'dictionary'
      ])
    }

  }
</script>

<style scoped>

</style>
